<template>
  <div>
    <el-form :model="form" :rules="rules" ref="form" label-width="100px" class="form-box">
      <el-form-item label="用户名" prop="userName" style="width: 70%;">
        <el-input v-model="form.userName" placeholder="请输入用户名"></el-input>
      </el-form-item>
      <el-form-item label="出生时间" prop="birthMonth" style="width: 70%;">
        <el-date-picker v-model="form.birthMonth" type="month" placeholder="选择月"></el-date-picker>
      </el-form-item>
      <el-form-item label="性别" prop="gender" style="width: 70%;">
        <el-radio-group v-model="form.gender">
          <el-radio label="男"></el-radio>
          <el-radio label="女"></el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="身份证号" prop="cardID" style="width: 70%;">
        <el-input v-model="form.cardID" placeholder="请输入身份证号"></el-input>
      </el-form-item>

    </el-form>

  </div>
</template>

<script>
export default {
  data() {
    // 用户名称 -- 校验
    var valiUserName = (rule, value, callback) => {
      var relen = 0
      for (let i = 0; i < value.length; i++) {
        if (value.charCodeAt(i) < 27 || value.charCodeAt(i) > 126) {
          relen += 2
        } else {
          relen++
        }
      }
      if (value == '') {
        callback(new Error('【用户名称】不能为空'))
      } else if (!/^[a-zA-Z0-9\u4e00-\u9fa5]+$/.test(value)) {
        callback(new Error('【用户名称】不允许有全角字符或特殊符号'))
      } else if (/^[0-9]*$/.test(value)) {
        callback(new Error('【用户名称】不允许只有数字'))
      } else if (relen < 4) {
        callback(new Error('【用户名称】不少于四个字符的长度'))
      } else if (!/^[\u4e00-\u9fa5]{2,}/.test(value)) {
        callback(new Error('【用户名称】前两位必须是汉字'))
      } else {
        callback()
      }
    }
    // 身份证号 -- 校验
    var valiCardID = (rule, value, callback) => {
      if (!/(^\d{15}$)|(^\d{18}$)|(^\d{14}(\d|X|x)$)|(^\d{17}(\d|X|x)$)/.test(value)) {
        callback(new Error('【身份证号】输入不合法，只允许全数字或者最后一位为 X 字符'))
      } else {
        callback()
      }
    }
    return {
      form: {
        userName: '', // 用户名
        birthMonth: '', // 出生时间
        gender: '', // 性别
        cardID: '', // 身份证号
      },
      str: 'hello world',
      rules: {
        userName: [
          { required: true, message: '请输入用户名', trigger: ['blur', 'change'] },
          { validator: valiUserName, trigger: ['blur', 'change'] }
        ],
        birthMonth: [{ required: true, message: '请选择出生时间', trigger: ['blur', 'change'] }],
        gender: [{ required: true, message: '请选择性别', trigger: ['blur', 'change'] }],
        cardID: [
          { required: true, message: '请输入身份证号', trigger: ['blur', 'change'] },
          { validator: valiCardID, trigger: ['blur', 'change'] }
        ],

      }
    }
  },
  methods: {},
  created() {
    console.log('form-------created')
  },
  mounted() {
    console.log('form-------mounted')
  },
  activated() {
    console.log('form-------activated')
  },
  deactivated() {
    console.log('form-------deactivated')
  },

}
</script>

<style scoped>
.form-box {
  width: 50%;
  height: 500px;
  border: 1px solid blueviolet;
  margin: 50px;
  padding: 20px;
}
</style>